<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="tishi"  v-if="!custName||custName.length==0">
				<view style="line-height: 80upx;margin-left: 40upx;color: #F04844;">请先完善信息</view>
			</view>
			<view class="tishi" >
				<text class="iconfont icon-tanhao un-icon1"></text>
				<view style="line-height: 80upx;">请务必与签约银行卡信息保持一致</view>
			</view>
			<form @submit="formSubmit" >
				<view class="cu-form-group">
					<view class="title">持卡人姓名</view>
					<input placeholder="请输入持卡人姓名" name="custName" :value="custName?custName:''"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">身份证号</view>
					<input placeholder="请输入持卡人身份证号" name="idNo" :value="idNo?idNo:''"></input>
				</view>
				
				<view class="cu-form-group">
					<view class="title">银行卡卡号</view>
					<input placeholder="请输入银行卡号" name="cardNo" :value="cardNo?cardNo:''" ></input>
				</view>
				<view class="cu-form-group">
					<view class="title">银行名称</view>
					<input placeholder="请点选择银行名称" name="bankName"  :value="bankName?bankName:''" @click="navToBankCode"  ></input>
					<text class="yticon icon-you un-icon"></text>
				</view>
				<view class="cu-form-group">
					<view class="title">详细地址</view>
					<input placeholder="请填写详细地址" name="address" :value="address?address:''"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">邮箱（选填）</view>
					<input placeholder="请填写邮箱" name="email" :value="email?email:''"></input>
				</view>
				<input v-show="false" name="bankNoId" v-model="bankNoId"></input>
				<view class="uni-btn-v uni-common-mt">
					<button class="btn-submit" formType="submit" type="primary">提交</button>
				</view>
			</form>
			
		</view>
	</view>
</template>

<script>
	
	//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var  graceChecker = require("../../../common/graceChecker.js");
	// var  BIN  = require("../../../common/index.js");
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components:{
				uniPopup,
				wPicker
		},
		data() {
			return {
				bankName:'',//银行名称
				custName: '',//持卡人姓名
				cardNo: '',//卡号
				idNo:'',//身份证号
				bankNoId:0,//银行名编码
				email:'',
				address:'',
			}
		},
		onLoad() {
			this.loadData()
			uni.$on('login', e => {
				this.bankName=e.BANKNAME;
				this.bankNoId=e.ID;
			});
			uni.startPullDownRefresh();
			
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		methods: {
			async loadData(){
				this.$http.post("/user/info",{
				     SIGNATURE : uni.getStorageSync("SIGNATURE"),
				     TOKEN: uni.getStorageSync('userInfo').TOKEN,
				}).then(res=>{
				    if(res.data.STATE == '903'||res.data.STATE == '904'){
				      uni.navigateTo({
				       url:'/pages/public/login1'
				      })
				     }
					if (res.statusCode === 200 && res.data.STATE === '0') {
						 this.bankNoId=res.data.OBJECT.BANKNOID,
						 this.custName=res.data.OBJECT.CUSTNAME,
						 this.idNo=res.data.OBJECT.CARDIDNO,
						 this.cardNo= res.data.OBJECT.CARDNO,
						 this.email= res.data.OBJECT.EMAIL,
						 this.address= res.data.OBJECT.ADDRESS;
						 if ( this.bankNoId != null ){
							 this.$http.post("/user/queryBankNameByid",{
							      SIGNATURE : uni.getStorageSync("SIGNATURE"),
							      TOKEN: uni.getStorageSync('userInfo').TOKEN,
							 		BANKID:this.bankNoId,
							     }).then(e=>{
							      if(e.data.STATE == '903'||e.data.STATE == '904'){
							       uni.navigateTo({
							        url:'/pages/public/login1'
							       })
							      }
							 	 if (e.statusCode === 200 && e.data.STATE === '0') {
							 	 	this.bankName=e.data.OBJECT.BANKNAME
							 	 }else{
							 	 	uni.showToast({title:e.data.MSG, icon:"none"});
							 	 }
							     }).catch(err =>{
							      console.log('request fail', err);
							     });
						 }
						 
					}else{
					 	uni.showToast({title:res.data.MSG, icon:"none"});
					}
				 }).catch(err =>{
				     console.log('request fail', err);
				 });
			},
			formSubmit: function (e) {
				//将下列代码加入到对应的检查位置
				//定义表单规则
				var rule = [
					{name:"custName", checkType : "notnull", checkRule:"",  errorMsg:"请输入持卡人姓名"},
					{name:"bankName", checkType : "notnull", checkRule:"",  errorMsg:"请选择银行名称"},
					{name:"address", checkType : "notnull", checkRule:"",  errorMsg:"请输入您的详细地址"},
					{name:"idNo", checkType : "string", checkRule:"18,18",  errorMsg:"请输入正确的身份证号"},
					{name:"cardNo", checkType : "int", checkRule:"15,18",  errorMsg:"请输入正确的银行卡号"},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					this.$http.post("/user/updatebank",{
						SIGNATURE : uni.getStorageSync('SIGNATURE'),
						TOKEN: uni.getStorageSync('userInfo').TOKEN,
						CUSTNAME: formData.custName,
						CARDNO: formData.cardNo,
						CARDIDNO:formData.idNo,
						BANKNOID:formData.bankNoId,
						ADDRESS:formData.address,
						EMAIL:formData.email,
					}).then((e)=>{
						if(e.data.STATE == '903'||e.data.STATE == '904'){
							uni.navigateTo({
								url:'/pages/public/login1'
							})
						}
						if (e.statusCode === 200 && e.data.STATE === '0') {  
							uni.redirectTo({
								url: "/pages/usercenter/usercenter"
							}) 
						}else{
							uni.showToast({title:e.data.MSG, icon:"none"});
						}
					}).catch((err)=>{
						console.log("修改失败",err)
					})
					
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			
			//索引列表选择银行
			navToBankCode(){
				uni.navigateTo({
					url:'/pages/bankcard/addbankcard/bankcode/bankcode'
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page {
			background: #f5f5f5;
	}
	.btn-submit{
		background-color: #E02E24;
		margin: 20upx 60upx;
	}
	.cu-form-group {
		background-color: #ffffff;
		padding: 1upx 50upx;
		display: flex;
		align-items: center;
		min-height: 83upx;
		justify-content: space-between;
		position: relative;
	}
	.cu-form-group+.cu-form-group {
		border-top: 1upx solid #eee;
	}
	.cu-form-group .title {
		text-align: justify;
		font-size: 28upx;
		position: relative;
		height: 60upx;
		line-height: 60upx;
		min-width: calc(4em + 15px);
	}
	input{
		width: 450upx;
		font-size: 28upx;
		color: #999999;
	}
	.un-icon{
		position: absolute;
		z-index: 1;
		left:650upx;
		color: #999999;
	}
	.uni-flex {
		display: flex;
		flex-direction: row;
		margin-right: 100upx;
		font-size: 28upx;
	}
	.uni-flex1{
		display: flex;
		flex-direction: row;
		margin-right: 150upx;
		font-size: 28upx;
	}
	
	.un-center-box{
		background-color: #fff;
		border: 2upx solid #9D9D9D;
		border-radius: 5%;
		width:600upx;
		height: 300upx;
		margin:0 30upx;
		text-align: center;
		.un-ling{
			background-color: #E02E24;
			width: 100%;
			height: 123upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 123upx;
			font-size: 38upx;
			font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
			font-weight: 700;
			font-style: normal;
			margin-bottom: 20upx;
		}
		.badge{
			position:absolute;
			top:50upx;
			right:50upx;
			color: #FFFFFF;
			display:flex;
			font-size: 38upx;
		}
	}
	
	.tishi{
		display: flex;
		border: #F2F2F2 1upx solid;
		color: #999999;
		font-size:24upx;
		padding-left:50upx;
		.un-icon1{
			margin-right:10upx;
			line-height: 85upx
		}
	}
	
</style>
